<template>
  <view :class="theme">
    <view class="relative">
      <u-image width="100%" height="266" src="/static/img/banner-service.png" />
      <view class="absolute jc-sb" style="top: 30rpx; right: 50rpx; bottom: 30rpx; left: 50rpx;">
        <view>
          <text class="fs-36 fw-700 color-3">竭诚为您服务</text>
          <text class="mt-20 color-3">致力于解决APP使用过程中遇到的问题</text>
        </view>
        <button hover-class="tap-hover" class="m-0 lh-60 bg-6 color-2 fs-28 fw-700 br-30"
          style="width: 230rpx;">联系客服</button>
      </view>
    </view>
    <view class="ml-50 mr-50">
      <label class="lh-5 fs-28 color-3 fw-700">官方Q群：</label>
      <view>
        <view @click="copyText(item.number)" v-for="(item, index) in options" :key="index"
          class="fd-row bg-2 mb-30 br-12 ai-center jc-center p-30">
          <text class="mr-24 fs-32 fw-500 color-3">{{ item.name }}: {{ item.number }}</text>
          <u-image width="24" height="24" src="/static/img/icon-copy_grey.png" />
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { useMapState } from "@/common/libs/store";
import { onLoad } from "@dcloudio/uni-app";
import { ref } from "vue";

const { theme } = useMapState(["theme"]);
const options = ref<AnyObject[]>([]);

onLoad(() => {
  uni.request({
    url: "/getCustomer",
    success({ data }: any) {
      if (!Array.isArray(data)) {
        return;
      }
      options.value = data;
    }
  })
});

const copyText = (data: string) => {
  uni.setClipboardData({
    data: data,
    showToast: true
  });
}

</script>

<style lang="scss" scoped>
// scss
</style>